<template>
	<view>
		<!-- <cus-nav title="智能匹配"></cus-nav> -->
		<!-- <view class="countdown">{{countdown}}</view> -->
		<view class="countdown">
			<count-down ref="countDown" @countEnd="countEnd"></count-down>
		</view>
		<!--准备界面-->
		<view v-show="!allReady" class="waitPage">
			<view class="romBody" style="text-align: center;">
				<view class="playerInfo">
					<view class="photo">
						<image :src="player1.Avatar|defaultPhoto" mode="aspectFit"></image>
					</view>
					<view class="halo">
						<view class="playerName">{{player1.Name||'???'}}</view>
					</view>
					<view class="matchingStatus">
						<image class="punch punch1" :class="{punchAct1:matched}" src="../static/img/punch1.png"></image>
						<image class="punch punch2" :class="{punchAct2:matched}" src="../static/img/punch2.png"></image>
					</view>
					<view class="readyStatues" v-if="!matched">
						<!-- 匹配中 -->
						<!-- {{matchingTime}}s
						<view class="readyBefore"></view>
						<view class="readyAfter"></view> -->
						<loading>
							<view v-if="!matched" class="matchOther">匹配中...</view>
							<view v-else>{{matchText}}</view>
						</loading>
					</view>
					<!-- <view class="center readyStatues2" v-else>{{matchText}}</view> -->
				</view>
			</view>
		</view>
	
		<!--答题界面-->
		<image src="../static/img/bg2.jpg" class="backImage" v-show="allReady"></image>
		<view v-show="allReady" class="playingPage">
			<!--计分板-->
			<view class="tool">
				<image v-if="backOn" @click="rotateToggle" class="backMusic" src="../../static/img/test/backToogle.png"></image>
				<image v-if="!backOn" @click="rotateToggle" src="../../static/img/test/backToogleGrey.png"></image>
			</view>
			<view class="scoreboard center">
				<view class="player player1">
					<view class="score f14" >{{progress1}}</view>
					<view class="playerInfo">
						<view class="picture">
							<image :src="player1.Avatar|defaultPhoto" mode="aspectFit"></image>
						</view>
						<view class="helo">
							<view class="name ellipsis">{{player1.Name||'???'}}</view>
						</view>
					</view>
				</view>
				<view class="vs"><image src="../static/img/vs.png"></image></view>
				<view class="player player2">
					<view class="score f14 score2">{{progress2}}</view>
					<view class="playerInfo playerInfo2">
						<view class="picture picture2">
							<image :src="player2.Avatar|defaultPhoto" mode="aspectFit"></image>
						</view>
						<view class="helo helo2">
							<view class="name ellipsis name2">{{player2.Name||'???'}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!--时间进度信息-->
			
			<view class="stateBar" style="min-height: 50px;">
				<!-- <view class="progress">
					<text>{{questionTime}}s</text>
					<view class="groove">
						<view class="stuffing" :class="{warnBack: questionTime <= 5, transition: questionTime !== 15}" :style="'width: ' + questionRate + '%;'"></view>
					</view>
				</view> -->
				<canvas canvas-id="progress" v-show="!completeStatus1 && !gameOver" :style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;'"></canvas>
			</view>
			<view class="tool">
				<!-- <image v-if="backOn" @click="rotateToggle" class="backMusic" src="../../static/img/test/backToogle.png"></image>
				<image v-if="!backOn" @click="rotateToggle" src="../../static/img/test/backToogleGrey.png"></image> -->
			</view>
			<view class="hint" v-if="restShow && !gameOver">对手已作答完毕，您还有<text style="color: red;">{{restTime}}</text>s的作答时间</view>
			<view class="hint" v-if="completeStatus1 && !gameOver">您答对了<text style="color: red;">{{myCorrect}}</text>题，请等待对手作答。<text style="color: red;">{{restTime}}</text>s</view>
			<view style="margin-top: 20px;" v-if="completeStatus1">
				<cos-btn text="不想等待了" @sure="cancelGame"></cos-btn>
			</view>
			<!--答题区-->
			<view class="questionArea">
				<question-box :question="question" :curIndex="curIndex" @choose="submit($event)" :finish="completeStatus1"></question-box>
			</view>
		</view>
		
		<view class="resultShadow" v-if="resultShow" @click="closeResult">
		<!-- <view class="resultShadow" @click="closeResult"> -->
			<result-box :result="result.Result" @quit="closeResult" :correct1="correct1" :correct2="correct2" :src1="player1.Avatar|defaultPhoto" :src2="player2.Avatar|defaultPhoto" :p1="progress1" :p2="progress2" :name1="player1.Name" :name2="player2.Name"></result-box>
		</view>
	</view>
</template>
<script>
	import cosBtn from '@/components/cos-btn.vue'
	import questionBox from '../components/question.vue'
	import resultBox from '../components/resultBox.vue'
	import countDown from '../components/countDown.vue'
	import loading from '../components/loading.vue'
	import config from '@/common/js/config.js'
	const {DEBUG} = config
	export default{
		components:{
			cosBtn,
			questionBox,
			resultBox,
			countDown,
			loading
		},
		filters:{
			defaultPhoto(str){
				if(!str){
					return require('../../static/img/mineIcon/touxiang.png')
				}else{
					return str
				}
			}
		},
		watch:{
			allReady(newVal, oldVal){
				if(!oldVal && newVal){
					this.matchingTime = 0
					clearInterval(this.matchingTimer)
					// if(DEBUG){
						this.audioContext.play()
					// }
					if(window.injectedObject){
						window.injectedObject.startMediaPlayer('backgroundPK.mp3')
						this.backOn = true
					}
					// this.$log('bgm开播！！！！！')
				}
			}
		},
		computed:{
			curIndex(){
				if(typeof this.question.Id !== 'number'){
					return 0
				}else{
					return this.question.Id + 1
				}
			},
			matched(){
				return this.player1.Id && this.player2.Id
			},
			questionRate(){
				const percent = Math.floor(this.questionTime / this.questionMaxTime * 100)
				return percent
			}
		},
		data(){
			return{
				AppKey: 'tongan.insyte.cn',
				debug: false,
				isApp: true,
				gameOver: false,
				matchingTime: 0,
				matchingTimer: null,
				questionTime: 30,
				questionMaxTime: 30,
				questionTimer: null,
				ctx: null,
				rate: 1,
				beginTime: 0,
				restPercent: 0,
				ringAnimation: null,
				canvasWidth: 375,
				canvasHeight: 50,
				countdown: '',
				allReady: false,
				ready: true,
				oppenent: false,
				socket: null,
				socketOpenStatus: false,
				myId: '',
				correct: false,
				creator: '',
				roomId: '',
				loginTimer: null,
				loginCountDown: 0,
				newRoom: false,
				player1: {},
				player2: {},
				progress1: 0,
				progress2: 0,
				correct1: 0,
				correct2: 0,
				completeStatus1: false,
				completeStatus2: false,
				question: {},
				submitting: false,
				result: {},
				resultShow: false,
				animationData: {},
				restShow: false,
				restTime: 59,
				timer: null,
				reconnectTime: 5,
				reconnectDisabled: false,
				backOn: false,
				audioContext: null,
				rightContext: null,
				wrongContext: null,
				punchContext: null,
				matchText: '匹配成功',
				myCorrect: 0
			}
		},
		onLoad(){
			let appkey = uni.getStorageSync('AppKey')
			this.AppKey = appkey || 'tongan.insyte.cn'
			this.audioInit()
			this.canvasInit()
			//匹配时间定时器
			this.matchingTimer = setInterval(()=>{
				this.matchingTime++
				if(this.matchingTime > 60){
					clearInterval(this.matchingTimer)
					uni.showModal({
						title: '提示',
						content: '未匹配到对手',
						showCancel: false,
						success:(res)=>{
							if(res.confirm){
								uni.navigateBack()
							}
						}
					})
				}
			},1000)
			//屏幕常亮
			//#ifdef MP-WEIXIN
			uni.setKeepScreenOn({
				keepScreenOn: true
			})
			//#endif
			this.player1 = {
				Avatar: this.$store.state.user.userimg,
				Name: this.$store.state.user.nickname
			}
			if(!this.debug){
				this.initSocket()
			}else{
				//测试用的
				this.setQuestionTimer()
				this.allReady = true
				this.question = {
					stems: [{"content":"2600÷400","index":"A"},{"content":"26÷40","index":"B"},{"content":"260÷4","index":"C"},{"content":"2600÷4","index":"D"}],
					Content: '[{"content":"2600÷400","index":"A"},{"content":"26÷40","index":"B"},{"content":"260÷4","index":"C"},{"content":"2600÷4","index":"D"}]',
					Id: 1,
					LimitSecond: 30,
					Title: "与260÷40的商相同的是 [ ]",
					Type: 1
				}
				this.result.Result = 2
			}
		},
		onBackPress(){
			if(window.injectedObject){
				window.injectedObject.stopMediaPlayer('backgroundPK.mp3')
			}
		},
		onShow(){
			this.setTitle('知识竞赛')
		},
		onHide(){
			this.audioContext.stop()
			if(window.injectedObject){
				window.injectedObject.stopMediaPlayer('backgroundPK.mp3')
			}
		},
		onUnload(){
			this.reconnectDisabled = true
			clearInterval(this.matchingTimer)
			try{
				getApp().globalData.socket.close()
			}catch(err){
				console.log(err)
			}
			if(window.injectedObject){
				window.injectedObject.stopMediaPlayer('backgroundPK.mp3')
			}
			// if(DEBUG){
				this.audioContext.stop()
				this.audioContext.destroy()
				this.rightContext.destroy()
				this.wrongContext.destroy()
			// }
		},
		methods: {
			
			start(){
				
			},
			rotateToggle(){
				if(this.backOn){
					// if(DEBUG){
						this.audioContext.pause()
					// }
					if(window.injectedObject){
						window.injectedObject.pauseMediaPlayer('backgroundPK.mp3')
					}
				}else{
					// if(DEBUG){
						this.audioContext.play()
					// }
					if(window.injectedObject){
						window.injectedObject.startMediaPlayer('backgroundPK.mp3')
					}
				}
				this.backOn = !this.backOn
			},
			audioInit(){
				this.audioContext = uni.createInnerAudioContext()
				this.audioContext.src = 'https://zhiyue.insyte.cn/media/music/backgroundPK.mp3'
				if(this.debug){
					this.audioContext.src = 'https://zhiyue.insyte.cn/media/music/last impression.mp3'
				}
				this.audioContext.loop = true
				this.audioContext.onError((err)=>{
					this.$toast('背景音乐加载出错了！')
				})
				this.audioContext.onPlay(()=>{
					this.backOn = true
					console.log('you are playing back.mp3')
				})
				this.audioContext.onPause(()=>{
					this.backOn = false
				})
				this.audioContext.onStop(()=>{
					this.backOn = false
				})
				this.punchContext = uni.createInnerAudioContext()
				this.punchContext.src = '../static/sound/punch.mp3'
				this.punchContext.onPlay(()=>{
					console.log('hey you are paly punch.mp3')
				})
				this.rightContext = uni.createInnerAudioContext()
				this.rightContext.src = 'https://zhiyue.insyte.cn/media/music/rightSound.mp3'
				this.wrongContext = uni.createInnerAudioContext()
				this.wrongContext.src = 'https://zhiyue.insyte.cn/media/music/wrongSound.mp3'
			},
			canvasInit(){
				let sysInfo = uni.getSystemInfoSync()
				if(sysInfo.screenWidth > sysInfo.screenHeight){
					this.rate = 607 / 375
				}else{
					this.rate = sysInfo.screenWidth / 375
				}
				this.canvasWidth = this.rate * 375
				this.canvasHeight = this.rate * 50
				this.ctx = uni.createCanvasContext('progress')
			},
			draw(){
				this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				this.backgroundCircle(this.ctx)
				this.foregroundCircle(this.ctx)
				this.fillText(this.ctx)
				this.ctx.draw()
			},
			backgroundCircle(ctx){
				let bgc = '#e2e3e2'
				ctx.save()
				ctx.beginPath()
				ctx.setLineWidth(8 * this.rate)
				ctx.setLineCap('round')
				ctx.setStrokeStyle(bgc)
				ctx.arc(this.canvasWidth / 2, this.canvasHeight / 2, 18 * this.rate, 0, 2 * Math.PI)
				ctx.stroke()
				ctx.closePath()
				ctx.restore()
			},
			foregroundCircle(ctx){
				let fgc = '#2C95F8'
				if(this.restPercent <= 0.3){
					fgc = '#ff2c2a'
				}
				let adjust = Math.PI / 2 
				let radian = Math.PI * 2 * this.restPercent + adjust
				if(this.restPercent === 0){
					return
				}
				ctx.save()
				ctx.beginPath()
				ctx.setLineWidth(8 * this.rate)
				ctx.setLineCap('round')
				ctx.setStrokeStyle(fgc)
				ctx.arc(this.canvasWidth / 2, this.canvasHeight / 2, 18 * this.rate, adjust, radian)
				ctx.stroke()
				ctx.closePath()
				ctx.restore()
			},
			fillText(ctx){
				let restTime = Math.floor((new Date() - this.beginTime) / 1000)
				restTime = restTime >= 0 ? restTime : 0
				let content = (this.questionMaxTime - restTime) + 's'
				let fontSize = 14 * this.rate
				ctx.save()
				ctx.fillStyle = '#2c95f8'
				ctx.setFontSize(fontSize)
				let textWidth = ctx.measureText(content).width
				ctx.fillText(content, (this.canvasWidth / 2) - (textWidth / 2), (this.canvasHeight / 2) + (fontSize / 2))
				ctx.restore()
			},
			cancelGame(){
				if(this.socketOpenStatus){
					this.reconnectDisabled = true
					getApp().globalData.socket.close({
						code: 4000,
						reason: '不想等待自动退出了。',
						success(){
							console.log('成功取消了')
						}
					})
				}
				uni.removeStorageSync('roomId')
				uni.navigateBack()
			},
			closeResult(){
				this.resultShow = false
				uni.navigateBack()
			},
			submit(idx, force){
				clearInterval(this.questionTimer)
				clearInterval(this.ringAnimation)
				this.submitting = true
				let answer = ''
				try{
					if(!force){
						answer = this.question.stems[idx].index
					}
				}catch(err){
					console.log(err)
				}
				let data = {
					Body: {
						PlayerId: this.myId,
						QuestionId: this.question.Id,
						Answer: answer
					},
					Method: 'answer'
				}
				const _that = this
				if(this.socketOpenStatus){
					getApp().globalData.socket.send({
						data: JSON.stringify(data),
						success(){
							console.log('发送成功')
						},
						fail(){
							console.log('发送失败')
						},
						complete(){
							_that.submitting = false
						}
					})
				}
			},
			reconnect(){
				if(this.reconnectDisabled){
					return
				}
				if(this.reconnectTime > 0){
					this.reconnectTime--
					clearInterval(this.matchingTimer)
					this.matchingTimer = setInterval(()=>{
						this.matchingTime++
						if(this.matchingTime > 30){
							clearInterval(this.matchingTimer)
							uni.showModal({
								title: '提示',
								content: '未匹配到对手',
								showCancel: false,
								success:(res)=>{
									if(res.confirm){
										uni.navigateBack()
									}
								}
							})
						}
					}, 1000)
					let _that = this
					if(getApp().globalData.socket.readyState && getApp().globalData.socket.readyState === 1){
						getApp().globalData.socket.close({
							success:()=>{
								_that.initSocket()
							},
							fail: (err)=>{
								console.log('重连关闭失败')
								console.log(err)
							}
						})
					}else{
						_that.newRoom = true
						_that.initSocket()
					}
				}else{
					this.$toast('websocket连接失败')
					uni.navigateBack()
				}
			},
			initSocket(){
				let roomId = uni.getStorageSync('roomId') || ''
				let AppKey = 'test2.zhiyuext.com'
				if(config && /www/.test(config.url)){
					AppKey = 'www.zhiyuext.com'
				}
				AppKey = this.AppKey
				let fromType = process.env.NODE_ENV === 'production' ? 2 : 0
				fromType = 2
				// let fromType = process.env.NODE_ENV === 'production' ? 2 : 2
				let query = `{"Method":"login", "Body": {"AppId": "${this.$store.state.user.keyid}", "AppKey": "${AppKey}", "Name": "${this.$store.state.user.nickname}", "Token": "${this.$store.state.user.token}", "Avatar": "${this.$store.state.user.userimg}", "from":  ${fromType}`
				if(roomId){
					query += `, "RoomId": "${roomId}"}}`
				}else{
					query += `}}`
				}
				console.log(query)
				query = encodeURIComponent(query)
				// let url = `ws://47.114.37.145:8000/login?${query}`
				let url = `wss://game.insyte.cn/login?${query}`
				// url = 'ws://192.168.1.76:8001'
				console.log('准备连接登录')
				getApp().globalData.socket = uni.connectSocket({
					url,
					success: (res)=>{
						console.log(res)
					},
					fail: (err)=>{
						console.log(err)
					}
				})
				getApp().globalData.socket.onOpen((res)=>{
					this.socketOpenStatus = true
					console.log('已连接')
					console.log(res)
				})
				getApp().globalData.socket.onClose((event, code)=>{
					this.socketOpenStatus = false
					console.log('即将关闭')
					console.log(event)
					if(this.newRoom){
						this.newRoom = false
						uni.removeStorageSync('roomId')
						this.reconnect()
						return
					}
					if(!this.resultShow){
						this.matchingTime = 0
						clearInterval(this.matchingTimer)
						// this.$toast('连接已断开，请退出重新连接')
						this.reconnect()
					}
				})
				getApp().globalData.socket.onError((err)=>{
					// this.$toast(err.errMsg)
					this.newRoom = true
					console.log('socket异常')
					console.log(err)
				})
				getApp().globalData.socket.onMessage((res)=>{
					const data = JSON.parse(res.data)
					console.log(data)
					this.socketHandler(data)
				})
			},
			socketHandler(data){
				if(!data.Method){
					return
				}
				switch(data.Method){
					case 'login':
						this.toLogin(data.Body)
						
						break
					case 'join':
						this.join(data.Body)
						break
					case 'quit':
						this.quit(data.Body)
						break
					case 'prepare':
						this.prepare(data.Body)
						break
					case 'question':
						this.getQuestion(data.Body)
						break
					case 'answer':
						this.getAnswer(data.Body)
						break
					case 'complete':
						this.complete(data.Body)
						break
					case 'completereminder':
						this.completereminder(data.Body)
						break
				}
			},
			toLogin(data){
				if(data.Code === 10005){
					this.newRoom = true
					return
				}
				if(data.Code !== 0){
					console.log(data.Msg)
					return
				}
				this.reconnectTime = 5
				let isReconnect = uni.getStorageSync('roomId')
				if(isReconnect){
					this.matchText = '重连成功'
				}else{
					this.matchText = '匹配成功'
				}
				this.myId = data.Id
				this.roomId = data.RoomId || ''
				this.loginCountDown = 0
				
				// this.loginTimer = setTimeout(()=>{
				// 	this.reconnect()
				// }, 15000)
			},
			join(data){
				// clearInterval(this.loginTimer)
				console.log('有人加入房间了')
				uni.setStorageSync('roomId', data.RoomId)
				data.Player.forEach(e => {
					if(e.Id === this.myId){
						this.player1 = e
					}else{
						this.player2 = e
					}
					if(e.Id === data.CreatorId){
						this.creator = e.Name
					}
				})
			},
			quit(data){
				if(data.Player.indexOf(this.player2.Id) >= 0){
					this.$toast('对手已断开连接')
				}
				console.log('对手已断开连接')
			},
			prepare(data){
				this.countdown = data.CountDown
				if(this.countdown === 3){
					this.$refs.countDown.countDown()
				
				}
				
			},
			countEnd(){
				this.allReady = true
				this.countdown = ''
			},
			getQuestion(data){
				setTimeout(()=>{
					this.allReady = true
				}, 1500)
				//首次开始延迟2s倒计时，重连不延迟直接开始进行答题
				let time = this.allReady ? 0 : 2000
				setTimeout(()=>{
					this.question = data
					this.question.stems = JSON.parse(this.question.Content)
					this.setQuestionTimer()
				}, time)
			},
			setQuestionTimer(){
				this.questionMaxTime = this.question.LimitSecond
				this.questionTime = this.question.LimitSecond
				clearInterval(this.questionTimer)
				this.questionTimer = setInterval(()=>{
					if(this.questionTime > 0){
						this.questionTime--
						if(this.questionTime < 0){
							this.questionTime = 0
						}
					}else{
						clearInterval(this.questionTimer)
						//提交答案
						this.submit(0, true)
					}
				}, 1000)
				clearInterval(this.ringAnimation)
				this.beginTime = new Date()
				this.ringAnimation = setInterval(()=>{
					let now = new Date()
					let ringPercent = (now - this.beginTime) /1000 / this.questionMaxTime
					if(ringPercent >= 1){
						clearInterval(this.ringAnimation)
					}
					this.restPercent = 1 - ringPercent >= 0 ? 1 - ringPercent : 0
					this.draw()
				}, 60)
			},
			getAnswer(data){
				this.allReady = true
				if(data.PlayerId === this.myId){
					this.progress1 = data.QuestionId + 1
					this.correct = data.Correct
					if(data.Correct){
						// if(DEBUG){
							this.rightContext.seek(0)
							this.rightContext.play()
						// }
						if(window.injectedObject){
							window.injectedObject.stopMediaPlayer('rightSound.mp3')
							window.injectedObject.startMediaPlayer('rightSound.mp3')
						}
					}else{
						// if(DEBUG){
							this.wrongContext.seek(0)
							this.wrongContext.play()
						// }
						if(window.injectedObject){
							window.injectedObject.stopMediaPlayer('wrongSound.mp3')
							window.injectedObject.startMediaPlayer('wrongSound.mp3')
						}
					}
				}else{
					this.progress2 = data.QuestionId + 1
				}
			},
			showRestTime(){
				// this.restTime = 30
				this.timer = setInterval(()=>{
					if(this.restTime > 0){
						this.restTime--
					}else{
						this.restShow = false
						clearInterval(this.timer)
					}
				}, 1000)
			},
			complete(data){
				this.gameOver = true
				this.restShow = false
				// if(DEBUG){
					this.audioContext.stop()
				// }
				if(window.injectedObject){
					window.injectedObject.stopMediaPlayer('backgroundPK.mp3')
				}
				clearInterval(this.questionTimer)
				clearInterval(this.ringAnimation)
				uni.removeStorageSync('roomId')
				clearInterval(this.timer)
				this.allReady = true
				const arr = data.Answer
				arr.forEach(e=>{
					if(e.PlayerId === this.myId){
						this.result = e
						this.correct1 = e.CorrectCount
					}else if(e.PlayerId === this.player2.Id){
						this.correct2 = e.CorrectCount
					}
				})
				this.resultShow = true
			},
			completereminder(data){
				if(data.PlayerId.indexOf(this.myId) >= 0){
					this.completeStatus1 = true
					this.reconnectDisabled = true
					this.question = {}
					this.myCorrect = data.Answer[0].CorrectCount
				}
				if(data.PlayerId.indexOf(this.player2.Id) >= 0){
					this.completeStatus2 = true
				}
				this.restTime = data.RemainingTime
				this.showRestTime()
				if(!this.completeStatus1){
					this.restShow = true
				}
			}
		},
		beforeDestroy(){
			//#ifdef MP-WEIXIN
			uni.setKeepScreenOn({
				keepScreenOn: false
			})
			//#endif
		}
	} 
</script>
<style>
	page{
		background-color: rgba(44,161,255,0.4);
		
	}
</style>
<style lang="scss" scoped>
	@import '../../common/style/public.css';
	.countdown{
		position: fixed;
		z-index: 5;
		font-size: 40px;
		color: #2C95F8;
		top: 70%;
		left: 50%;
		transform: translateX(-50%);
	}
	.waitPage{
		width: 100%;
		height: 100%;
		background-image: url('../static/img/bg1.png');
		background-repeat: no-repeat;
		background-size: 583rpx 235rpx;
		background-position: 85rpx 250rpx;
		.romBody{
			// margin-top: 70px;
			padding-top: 87rpx;
			.photo{
				position: relative;
				width: 244rpx;
				margin: 0 auto;
				height: 244rpx;
				&::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					z-index: 0;
					width: 244rpx;
					height: 244rpx;
					border-radius: 50%;
					background-color: rgba(255,255,255,0.4);
				}
				&::after{
					content: '';
					position: absolute;
					top: 8rpx;
					left: 8rpx;
					z-index: 0;
					width: 228rpx;
					height: 228rpx;
					border-radius: 50%;
					background-color: rgba(255,255,255,0.7);
				}
				image{
					position: relative;
					z-index: 1;
					top: 16rpx;
					left: 0;
					box-sizing: border-box;
					width: 210rpx;
					height: 210rpx;
					border: 8rpx solid white;
					border-radius: 50%;
				}
			}
			.halo{
				box-sizing: border-box;
				padding: 6rpx;
				border-radius: 30rpx;
				overflow: hidden;
				width: 319rpx;
				height: 86rpx;
				margin: 30rpx auto;
				background-color: rgba(255,255,255,0.6);
				.playerName{
					width: 305rpx;
					height: 68rpx;
					line-height: 68rpx;
					// margin: 30rpx auto;
					font-size: 46rpx;
					color: #ffffff;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					border-radius: 30rpx;
					border: 5rpx solid #ffffff;
					background-color: #ffc81a;
				}
			}
			
			.readyStatues2{
				position: relative;
				font-size: 14px;
				margin-top: 100px;
				color: #ffffff;
				&:before{
					position: absolute;
					content: '';
					width: 80px;
					height: 80px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border-radius: 50%;
					border: 5px solid #2C95F8;
					background-color: #f79048;
					z-index: -1;
				}
			}
			.matchingStatus{
				margin-top: 120rpx;
				position: relative;
				.punch{
					position: absolute;
					width: 228rpx;
					height: 164rpx;
					top: 35rpx;
				}
				.punch1{
					left: 44rpx;
				}
				.punch2{
					right: 44rpx;
				}
				.punchAct1{
					animation: throwPunch1 1.3s linear;
					animation-fill-mode: forwards;
				}
				.punchAct2{
					animation: throwPunch2 1.3s linear;
					animation-fill-mode: forwards;
				}
			}
			.readyStatues{
				position: relative;
				font-size: 14px;
				margin-top: 290px;
				// color: #373737;
				.matchOther{
					animation: blink 1s infinite alternate;
				}
				&:before{
					position: absolute;
					content: '';
					width: 60px;
					height: 60px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border: 5px solid rgba(0,0,0,0);
					// border-left: 5px solid #2C95F8;
					border-radius: 50%;
					// animation: scroll 1s ease-in-out infinite;
				}
				.readyBefore{
					position: absolute;
					content: '';
					width: 80px;
					height: 80px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border: 5px solid rgba(0,0,0,0);
					border-right: 5px solid #2C95F8;
					border-radius: 50%;
					animation: scroll 1.3s ease-in-out infinite;
				}
				.readyAfter{
					position: absolute;
					content: '';
					width: 70px;
					height: 70px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					border: 5px solid rgba(0,0,0,0);
					border-top: 5px solid #f79048;
					border-bottom: 5px solid #f79048;
					border-radius: 50%;
					animation: scrollBack 1.5s linear infinite;
				}
			}
			
		}
	}
	.backImage{
		position: fixed;
		width: auto;
		height: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}
	.playingPage{
		position: relative;
		z-index: 2;
		width: 100%;
		min-height: 100%;
		padding-top: 128rpx;
		.scoreboard{
			// text-align: center;
			// margin-top: 40px;
			position: relative;
			.vs{
				width: 145rpx;
				height: 75rpx;
				margin: 0 auto;
				image{
					width: 145rpx;
					height: 75rpx;
				}
			}
			.player{
				box-sizing: border-box;
				position: absolute;
				width: 176rpx;
				height: 83rpx;
				top: 0;
				left: 110rpx;
				color: #ffffff;
				line-height: 73rpx;
				border: 5rpx solid #ffffff;
				border-radius: 28rpx;
				background-color: #3497f5;
				.score{
					position: absolute;
					// text-indent: 10rpx;
					top: 0;
					right: 0;
					width: 130rpx;
					height: 75rpx;
					text-align: center;
					color: #ffffff;
					font-size: 52rpx;
				}
				
				.score2{
					left: 0;
				}
				.playerInfo{
					position: absolute;
					top: -42rpx;
					left: -104rpx;
					z-index: 2;
					.picture{
						position: relative;
						// top: 0;
						// left: 40rpx;
						// width: 120rpx;
						// height: 120rpx;
						// border: 1px solid #ffffff;
						// border-radius: 50%;
						// background: #ffffff;
						&::before{
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 157rpx;
							height: 157rpx;
							border-radius: 50%;
							background-color: rgba(255,255,255,0.4);
						}
						&::after{
							content: '';
							position: absolute;
							top: 5rpx;
							left: 5rpx;
							width: 147rpx;
							height: 147rpx;
							border-radius: 50%;
							background-color: rgba(255,255,255,0.7);
						}
						image{
							box-sizing: border-box;
							position: absolute;
							top: 10rpx;
							left: 10rpx;
							z-index: 2;
							width: 137rpx;
							height: 137rpx;
							border: 5rpx solid #ffffff;
							border-radius: 50%;
							background-color: #ffffff;
						}
					}
					.picture2{
						left: 0;
					}
					
				}
				.playerInfo2{
					left: 113rpx;
				}
				.helo{
					position: absolute;
					top: 163rpx;
					left: -5rpx;
					box-sizing: border-box;
					width: 185rpx;
					height: 65rpx;
					padding: 5rpx;
					border-radius: 23rpx;
					background-color: rgba(255,255,255,0.4);
				}
				.helo2{
					left: -19rpx;
				}
				.name{
					box-sizing: border-box;
					// position: absolute;
					width: 175rpx;
					height: 55rpx;
					padding: 0 15rpx;
					line-height: 50rpx;
					// top: 168rpx;
					// left: 0;
					text-align: center;
					font-size: 30rpx;
					font-weight: bold;
					border: 4rpx solid #ffffff;
					border-radius: 23rpx;
					background-color: #ffc81a;
					
				}
				.name2{
					// left: -24rpx;
				}
				
			}
			.player1{
				// background: #f2f2f2;
				// background: linear-gradient(135deg, #EBF6FF, #2C95F8);
			}
			.player2{
				right: 110rpx;
				left: auto;
				background-color: #f2731d;
				// background: #dcdcdc;
				// background: linear-gradient(135deg, #EBF6FF, #2C95F8);
			}
		}
		.stateBar{
			margin-top: 15px;
			// padding-left: 40rpx;
			font-size: 28rpx;
			color: #2c95f8;
			line-height: 60rpx;
			.restTime{
				padding: 10rpx 20rpx;
				margin-right: 32rpx;
				border-radius: 26px;
				background: #EBF6FF;
				overflow: hidden;		
				.clock{
					width: 32rpx;
					height: 32rpx;
					vertical-align: -10%;
					margin-right: 20rpx;
				}
			}
			.progress{
				padding: 10rpx 0;
				.groove{
					display: inline-block;
					width: 600rpx;
					heigth: 16rpx;
					margin-left: 18rpx;
					vertical-align: 5%;
					border-radius: 8rpx;
					overflow: hidden;
					background: #EBF6FF;
					.stuffing{
						height: 16rpx;
						border-radius: 8rpx;
						overflow: hidden;
						width: 0%;
						background: #2C95F8;
					}
					.transition{
						transition: width 1s linear;
						-webkit-transition: width 1s linear;
					}
					.warnBack{
						background: red;
					}
				}
				.grooveAllScreen{
					width: 560rpx;
				}
			}
		}
		.questionArea{
			padding: 0 35px;
			margin-top: 15px;
			
		}
	}
	.resultShadow{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 6;
		background: rgba(0,0,0,0.4);
		// padding: 620px 15px;
		padding: 20% 15px;
	}
	.hint{
		text-align: center;
		font-size: 32rpx;
		color: #4cb5f6;
		padding: 40px 0;
	}
	.opacity{
		opacity: 0;
	}
	.tool{
		position: relative;
		right: 10rpx;
		top: -80rpx;
		height: 75rpx;
		.backMusic{
			animation: rotate 2s linear infinite;
		}
		image{
			position: absolute;
			right: 34rpx;
			width: 58rpx;
			height: 58rpx;
		}
	}
	@keyframes scroll{
		0%{
			transform: translate(-50%, -50%) rotate(0deg)
		}
		100%{
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}
	@keyframes scrollBack{
		0%{
			transform: translate(-50%, -50%) rotate(390deg);
		}
		100%{
			transform: translate(-50%, -50%) rotate(30deg);
		}
	}
	@keyframes rotate{
		from{transform: rotate(0)}
		to{transform: rotate(360deg)}
	}
	@keyframes blink{
		30%{
			opacity: 1;
		}
		100%{
			opacity: 0.4;
		}
	}
	
	@keyframes throwPunch1{
		0%{
			transform: translateX(0)
		}
		30%{
			transform: translateX(-20rpx)
		}
		70%{
			transform: translateX(50rpx)
		}
		80%{
			transform: translateX(110rpx)
		}
		100%{
			transform: translateX(100rpx)
		}
	}
	@keyframes throwPunch2{
		0%{
			transform: translateX(0)
		}
		30%{
			transform: translateX(20rpx)
		}
		70%{
			transform: translateX(-50rpx)
		}
		80%{
			transform: translateX(-110rpx)
		}
		100%{
			transform: translateX(-100rpx)
		}
	}
</style>
<style>
	page{
		background-color: rgba(44,161,255,0.4);
		height: 100%;
	}
</style>